<template>
  <l-data-panel :label="data.label" isApp isMore>
    <div class="l-rblock l-min-databoard">
      <div :key="item.id" v-for="item in data.list" class="l-min-databoard__item">
        <div class="num">{{ getValue(item) }}</div>
        <div class="label">{{ item.name }}</div>
      </div>
    </div>
  </l-data-panel>
</template>
<script>
export default {
  props: ["data", "isPreview"],
  data() {
    return {};
  },
  computed: {},

  mounted() {},
  methods: {
    getValue(item) {
      if (item.mode == 0) {
        if (item.apiCode && this.lr_apiDataSourceData && item.dataValueKey) {
          const data = this.lr_apiDataSourceData[item.apiCode];
          if (data) {
            return data[0][item.dataValueKey];
          }
        }
      } else {
        if (item.dataCode && this.lr_dataSourceData && item.dataValueKey) {
          this.lr_loadDataSourceData(item.dataCode);
          const data = this.lr_dataSourceData[item.dataCode];
          if (data) {
            return data[0][item.dataValueKey];
          }
        }
      }
      return 0;
    },
  },
};
</script>
<style lang="scss" scoped>
.l-min-databoard {
  display: flex;
  &__item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    justify-content: center;
    min-width: 25%;
    box-sizing: border-box;

    .num {
      color: #000;
      font-size: 16px;
      margin-bottom: 8px;
    }
    .label {
      font-size: 12px;
    }
  }
}
</style>
